<template>
  <div class="about">
    <div id="cesiumContainer" class="fullSize"></div>
  </div>
</template>
  
  <script>
// import * as Cesium from 'cesium';
// import "cesium/Build/Cesium/Widgets/widgets.css"
export default {
  data() {
    return {
      viewer: null,
    };
  },
  mounted() {
    this.initCesium();
    this.addGraphical();
    this.addPoint();
    // this.drawWater()
    // this.addPicture();
    this.handlePlane();
    this.addImagery()
    // this.addWaterAnimate()
    // this.drawWater()
    // this.removePicture()
    this.addBillboard()
  },
  methods: {
    initCesium() {
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4NTYxZWYzZi1jYTc0LTRiZWYtYjkxYS03M2ViNTYyYTk4OTciLCJpZCI6MTEzMDEwLCJpYXQiOjE2NjcyMDIzNTB9.ovVryIJRAyp_zT2XsSYdbaPGTRJEjtWMbma7_NGHZA4";
      // 相机在创建时将查看的默认矩形
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
        90,
        -20,
        110,
        90
      );
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        requestRenderMode:true,  //降低cesium的CPU使用率
        animation: false, //是否显示动画控件
        homeButton: false, //是否显示home键
        geocoder: true, // 查询
        baseLayerPicker: false, //是否显示图层选择控件
        timeline: false, //是否显示时间线控件
        fullscreenButton: false, //是否全屏显示
        scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
        infoBox: true, //是否显示点击要素之后显示的信息
        sceneModePicker: false, //是否显示投影方式控件  三维/二维
        navigationHelpButton: false, //是否显示帮助信息控件
        // imageryProvider: new Cesium.UrlTemplateImageryProvider({
        // url: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',
        // }),
        imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
          url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
        }),
        // 地形
        terrainProvider: new Cesium.CesiumTerrainProvider({
          url: Cesium.IonResource.fromAssetId(1),
          //基于太阳位置开启地形照明
          requestVertexNormals: true,
          //启用水体效果
          requestWaterMask: true,
        }),
        skyAtmosphere: false,
        // orderIndependentTranslucency: false,
        contextOptions: {
          webgl: {
            alpha: true,
          },
        },
      });
      // 设置基本属性
      this.viewer.scene.requestRenderMode=true
      this.viewer.scene.sun.show = true;
      this.viewer.scene.moon.show = false;
      this.viewer.scene.skyBox.show = false; //关闭天空盒，否则会显示天空颜色
      this.viewer.scene.undergroundMode = true;
      this.viewer.scene.globe.show = true;
      this.viewer.scene.backgroundColor = new Cesium.Color(255, 255, 255, 0.5);
      this.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1000;
      this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 5600000;
      if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
        //判断是否支持图像渲染像素化处理
        this.viewer.resolutionScale = window.devicePixelRatio;
      }
      this.viewer.scene.fxaa = true;
      this.viewer.scene.postProcessStages.fxaa.enabled = true;
      // 隐藏版权
      this.viewer._cesiumWidget._creditContainer.style.display = "none";
      // 限制镜头高度
      this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 10000;
      this.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 10;

      // 添加建筑物
      this.viewer.scene.primitives.add(
        new Cesium.Cesium3DTileset({
          url:Cesium.IonResource.fromAssetId(96188)
        })
      )

      // 相机机位、中心点坐标
      this.viewer.scene.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(118.767413, 32.041544, 4000),
        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-40),
          roll: Cesium.Math.toRadians(0), //heading、pitch和roll就是镜头相对于xyz轴的角度，比如pitch为-90°而另外两个为0时，就是90°向下俯视地球。
        },
      });
    },

    // 在地图上绘制立方体
    addGraphical() {
      this.viewer.entities.add({
        rectangle: {
          coordinates: Cesium.Rectangle.fromDegrees(
            118.21,
            31.1,
            118.22,
            31.14
          ),
          extrudedHeight: 50.0,
          outline: true,
          outlineColor: Cesium.Color.WHITE,
          outlineWidth: 4,
          stRotation: Cesium.Math.toRadians(0),
          material: Cesium.Color.fromRandom({ alpha: 1.0 }),
          // scale:Cesium.Matrix4.fromUniformScale(0.1)
        },
      });
    },

    // 添加点标记
    addPoint() {
      this.viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(118.767413, 32.041544),
        point: {
          color: Cesium.Color.RED, //点位颜色
          pixelSize: 10, //像素点大小
        },
        label: {
          text: "测试点",
          font: "14pt Source Han Sans CN", //字体样式
          fillColor: Cesium.Color.BLACK, //字体颜色
          backgroundColor: Cesium.Color.AQUA, //背景颜色
          showBackground: true, //是否显示背景颜色
          style: Cesium.LabelStyle.FILL, //label样式
          outlineWidth: 2,
          verticalOrigin: Cesium.VerticalOrigin.CENTER, //垂直位置
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT, //水平位置
          pixelOffset: new Cesium.Cartesian2(10, 0), //偏移
          disableDepthTestDistance:Number.POSITIVE_INFINITY,
        },
      });
    },

    // 添加平面
    addPicture() {
      var entityPlane = new Cesium.Entity({
        id: "entityPlane0",
        name: "entityPlane",
        position: Cesium.Cartesian3.fromDegrees(118.767413, 32.041544),
        plane: {
          // 平面
          plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Y, 0.0),
          dimensions: new Cesium.Cartesian2(400, 300),
          // 背景材质
          material: new Cesium.ImageMaterialProperty({
                image: 'https://img1.baidu.com/it/u=1670214688,1888102973&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
                repeat : new Cesium.Cartesian2(1, 1)

            }),
        },
        description: `<div>
          <img width="100%" height="300px" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Fface%2F0d3265ca8d916b073e73578af15a3b4ea2ca3568.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670635803&t=20e16a65b63b880caea9701ecbefc7e2">
          <h3>测试专用</h3>
          </div>`,
      });
      let planeGeom = this.viewer.entities.add(entityPlane);
      // 视角移动到平面
      this.viewer.zoomTo(planeGeom);
    },

    // 添加图层
    addImagery() {
      var layers = this.viewer.scene.imageryLayers;
      //图层列表集合的addImageryProvider方法:
      //两个参数，第一参数是一个ImageryProvider函数，这个函数的作用是新建一个图层;第二个参数是index，Number类型，作用是指定新插入图层在图层列表集合中的索引(位置)，若不指定，默认新图层添加在最上层
      //返回值是新添加到图层列表集合中的图层
      var blackMarble = layers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
        })
      );
      //get或set图层透明度，范围是0-1
      blackMarble.alpha = 0.5;

      //get或set图层亮度，小于1图层更暗，大于1更亮
      blackMarble.brightness = 2.0;
    },

    // 添加广告牌
    addBillboard(){
       // 添加广告牌实体
      this.viewer.entities.add({
        name: 'billboard',
        position: Cesium.Cartesian3.fromDegrees(118.767413, 32.041544),
        label: { //文字标签
          text: "标记地点",
          font: '50 30px Helvetica',// 15pt monospace
          scale: 0.5,
          // style: Cesium.LabelStyle.FILL,
          fillColor: Cesium.Color.WHITE,
          pixelOffset: new Cesium.Cartesian2(0, -75), //偏移量
          showBackground: true,
          backgroundColor: new Cesium.Color(0.5, 0.6, 1, 1.0),
        },
        billboard:{
            image: 'https://img1.baidu.com/it/u=1670214688,1888102973&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            scale: 0.5,
            width: 150,
					  height: 130,
        }
      })
    },

    // 绑定方法操作平面
    handlePlane() {
      let that = this;
      var handler = new Cesium.ScreenSpaceEventHandler(
        this.viewer.scene.canvas
      );
      handler.setInputAction(function (movement) {
        var pick = that.viewer.scene.pick(movement.position);
        if (Cesium.defined(pick) && pick.id.id === "entityPlane0") {
          alert("111");
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },

    /**
     * 添加水面动画
     */
    addWaterAnimate() {
      let that = this;
      let globe = this.viewer.scene.globe;
      globe.depthTestAgainstTerrain = true;
      this.viewer.camera.setView({
        //定位到范围中心点
        destination: Cesium.Cartesian3.fromDegrees(
          118.767413, 32.041544,
          12000
        ),
        orientation: {
          heading: Cesium.Math.toRadians(130.304929908965146), //1
          pitch: Cesium.Math.toRadians(-17.364771143804237),
          roll: 0.09931507517437696,
        },
      });

      let points = [
        [87.07131373100303, 29.40857655725876],
        [87.33503858397042, 29.41843499494008],
        [87.33072496578943, 29.193059292424955],
        [87.05098771260403, 29.20286249623694],
      ];
      let polygonArr = [];
      for (let i = 0; i < points.length; i++) {
        polygonArr.push(points[i][0]);
        polygonArr.push(points[i][1]);
        polygonArr.push(0);
      }
      that.drawWater(4400, polygonArr);
    },
    /**
     *
     * @param {*} targetHeight 目标高度
     * @param {*} areaCoor  范围坐标
     */
    drawWater(targetHeight, areaCoor) {
      let that = this;
      that.viewer.entities.remove(that.waterEntityEnd);
      that.waterEntityEnd = that.viewer.scene.primitives.add(
        new Cesium.Primitive({
          geometryInstances: new Cesium.GeometryInstance({
            geometry: new Cesium.PolygonGeometry({
              polygonHierarchy: new Cesium.PolygonHierarchy(
                Cesium.Cartesian3.fromDegreesArrayHeights(areaCoor)
              ),
              height: targetHeight,
            }),
          }),
          appearance: new Cesium.EllipsoidSurfaceAppearance({
            aboveGround: true,
            material: new Cesium.Material({
              fabric: {
                type: "Water",
                uniforms: {
                  normalMap: "https://img1.baidu.com/it/u=1915217114,3200673019&fm=253&fmt=auto&app=138&f=GIF?w=407&h=276",
                  frequency: 1000.0,
                  animationSpeed: 0.05,
                  amplitude: 10.0,
                },
              },
            }),
          }),
          show: true,
        })
      );
    },

    // 移除图片
    // removePicture(){
    //   this.viewer.entities.remove(entityPlane)
    // }
  },
};
</script>
  
  <style lang="scss" scoped>
.about {
  height: 100%;
  #cesiumContainer {
    height: 100%;
  }
}
</style>
  